<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
.myApp-item{margin-bottom: 60px;}
.main{width:100%;}
.main-box-top{width: 100%; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid red;}
.main-box-top-item{width: 25%; float: left; text-align: center; cursor:pointer;}
.main-box-top-item.active{color:red;}
.main-box-bottom-item{display: none;}
.main-box-bottom-item.active{display: block;}
</style>
</head>
<body>
<div id='myApp' >
    <div class="myApp-item">
        <div class='main'>
            <div class='main-box-top'>
                <div class='main-box-top-item' v-for='(x,k) in nav' :class='{"active":x.active}' @click='openNav(k)' v-text='x.title'></div>
            </div>
            <div class='main-box-bottom'>
                <ul class='main-box-bottom-item' :class='{"active":nav[0].active}'>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                </ul>
                <ul class='main-box-bottom-item' :class='{"active":nav[1].active}'>
                    <li>发现</li>
                    <li>发现</li>
                    <li>发现</li>
                    <li>发现</li>
                    <li>发现</li>
                    <li>发现</li>
                </ul>
                <ul class='main-box-bottom-item' :class='{"active":nav[2].active}'>
                    <li>订单</li>
                    <li>订单</li>
                    <li>订单</li>
                    <li>订单</li>
                    <li>订单</li>
                    <li>订单</li>
                </ul>
                <ul class='main-box-bottom-item' :class='{"active":nav[3].active}'>
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                    <li>我的</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="myApp-item">
        <button-counter></button-counter>
        <async-example></async-example>
        <home></home>
        <yibu></yibu>
        <hr>
        <lingyige></lingyige>
    </div>
</div>
<script type="text/javascript">
// 简单组件
Vue.component('button-counter', {
    data: function () {
        return {
            message:'消息',
        }
    },
    template: '<button>我是一个简单的组件</button>'
}); 
// 异步组件
Vue.component('async-example',function (resolve, reject) {
    setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
            data:function(){
                return {
                    message:'zhaozilong'
                }
            },
            methods:{
                changfun:function(){
                    console.log('sssssssssssssss');
                },
            },
            template: '<button @click="changfun">我是异步组件sdf{{message}}</button>'
        })
    }, 1000)
});
var myApp = new Vue({
    el:"#myApp",
    data:{
        message:'我是消息',
        appmsg:'我是appmsg',
        nav:[
            {id:0,title:'首页',active:true},
            {id:1,title:'发现',active:false},
            {id:2,title:'订单',active:false},
            {id:3,title:'我的',active:false},
        ],
        htmlData:""
    },
    mounted:function(){},
    methods:{
        openNav:function(k){
            console.log(k);
            this.changeNav(k);
        },
        changeNav:function(key){
            this.nav.forEach((i,k)=>{
                this.nav[k].active = false;
            });
            this.nav[key].active = true;
        },
        changfun:function(){
            console.log('changfun');
        },
    },
    components:{
        home:{
            data: function () {
                return {
                    message:'homeMessage',
                }
            },
            template: "<button>我是一个HOME的{{message}}组件</button>"
        },
        yibu:function(resolve, reject){
            // 向 resolve 回调传递组件定义
            setTimeout(()=>{
                resolve({
                    template: "<button>我还是一个异步组件</button>"
                })
            }, 1000)
        },
        lingyige:{
            data:function(){
                return {
                    messages:'我是lingyige',
                }
            },
            render:function(){
                return "<button>我是lingyige组件</button>"
            },
        },
    }
});
</script>
</body>
</html>